വെബ്ജിഎൽ മെമ്മറി പൂൾ ഫ്രാഗ്മെൻ്റേഷൻ: പ്രകടനത്തിനായി ബഫർ അലോക്കേഷൻ ഒപ്റ്റിമൈസ് ചെയ്യൽ

പ്ലഗ്-ഇന്നുകളുടെ ഉപയോഗമില്ലാതെ, അനുയോജ്യമായ ഏത് വെബ് ബ്രൗസറിലും ഇൻ്ററാക്ടീവ് 2D, 3D ഗ്രാഫിക്സ് റെൻഡർ ചെയ്യുന്നതിനുള്ള ഒരു ജാവാസ്ക്രിപ്റ്റ് API ആണ് വെബ്ജിഎൽ. ഇത് കാഴ്ചയിൽ അതിശയിപ്പിക്കുന്നതും മികച്ച പ്രകടനം കാഴ്ചവെക്കുന്നതുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ സഹായിക്കുന്നു. എന്നിരുന്നാലും, ഇതിൻ്റെ കാര്യക്ഷമമായ പ്രവർത്തനത്തിന് മെമ്മറി മാനേജ്മെൻ്റ് നിർണായകമാണ്. ഡെവലപ്പർമാർ നേരിടുന്ന ഏറ്റവും വലിയ വെല്ലുവിളികളിലൊന്നാണ് മെമ്മറി പൂൾ ഫ്രാഗ്മെൻ്റേഷൻ, ഇത് പ്രകടനത്തെ സാരമായി ബാധിക്കും. ഈ ലേഖനം വെബ്ജിഎൽ മെമ്മറി പൂളുകൾ, ഫ്രാഗ്മെൻ്റേഷൻ പ്രശ്നം, അതിൻ്റെ പ്രത്യാഘാതങ്ങൾ ലഘൂകരിക്കുന്നതിന് ബഫർ അലോക്കേഷൻ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള തന്ത്രങ്ങൾ എന്നിവയെക്കുറിച്ച് ആഴത്തിൽ ചർച്ചചെയ്യുന്നു.

വെബ്ജിഎൽ മെമ്മറി മാനേജ്മെൻ്റ് മനസ്സിലാക്കൽ

അടിസ്ഥാന ഗ്രാഫിക്സ് ഹാർഡ്‌വെയറിൻ്റെ പല സങ്കീർണ്ണതകളും വെബ്ജിഎൽ ലളിതമാക്കുന്നു, എന്നാൽ ഒപ്റ്റിമൈസേഷനായി അത് മെമ്മറി എങ്ങനെ കൈകാര്യം ചെയ്യുന്നുവെന്ന് മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. ടെക്സ്ചറുകൾ, വെർട്ടെക്സ് ബഫറുകൾ, ഇൻഡെക്സ് ബഫറുകൾ തുടങ്ങിയ റിസോഴ്‌സുകൾ സംഭരിക്കുന്നതിനായി നീക്കിവച്ചിരിക്കുന്ന മെമ്മറിയുടെ ഒരു പ്രത്യേക ഭാഗമായ മെമ്മറി പൂളിനെയാണ് വെബ്ജിഎൽ ആശ്രയിക്കുന്നത്. നിങ്ങൾ ഒരു പുതിയ വെബ്ജിഎൽ ഒബ്ജക്റ്റ് ഉണ്ടാക്കുമ്പോൾ, API ഈ പൂളിൽ നിന്ന് ഒരു ഭാഗം മെമ്മറി അഭ്യർത്ഥിക്കുന്നു. ഒബ്ജക്റ്റിൻ്റെ ആവശ്യം കഴിയുമ്പോൾ, മെമ്മറി പൂളിലേക്ക് തിരികെ നൽകുന്നു.

ഓട്ടോമാറ്റിക് ഗാർബേജ് കളക്ഷൻ ഉള്ള ഭാഷകളിൽ നിന്ന് വ്യത്യസ്തമായി, വെബ്ജിഎല്ലിൽ സാധാരണയായി ഈ റിസോഴ്‌സുകൾ സ്വമേധയാ കൈകാര്യം ചെയ്യേണ്ടതുണ്ട്. ആധുനിക ജാവാസ്ക്രിപ്റ്റ് എഞ്ചിനുകൾക്ക് ഗാർബേജ് കളക്ഷൻ ഉണ്ടെങ്കിലും, അടിസ്ഥാനപരമായ വെബ്ജിഎൽ കോൺടെക്സ്റ്റുമായുള്ള അതിൻ്റെ ഇടപെടൽ ശ്രദ്ധാപൂർവ്വം കൈകാര്യം ചെയ്തില്ലെങ്കിൽ പ്രകടന പ്രശ്നങ്ങൾക്ക് കാരണമാകും.

ബഫറുകൾ: ജ്യാമിതിയുടെ നിർമ്മാണ ഘടകങ്ങൾ

ബഫറുകൾ വെബ്ജിഎല്ലിൻ്റെ അടിസ്ഥാന ഘടകമാണ്. അവ വെർട്ടെക്സ് ഡാറ്റയും (സ്ഥാനങ്ങൾ, നോർമലുകൾ, ടെക്സ്ചർ കോർഡിനേറ്റുകൾ) ഇൻഡെക്സ് ഡാറ്റയും (വെർട്ടെക്സുകൾ എങ്ങനെ ബന്ധിപ്പിച്ച് ത്രികോണങ്ങൾ രൂപീകരിക്കണമെന്ന് വ്യക്തമാക്കുന്നു) സംഭരിക്കുന്നു. അതിനാൽ, കാര്യക്ഷമമായ ബഫർ മാനേജ്മെൻ്റ് പരമപ്രധാനമാണ്.

പ്രധാനമായും രണ്ട് തരം ബഫറുകളുണ്ട്:

• വെർട്ടെക്സ് ബഫറുകൾ: വെർട്ടെക്സുകളുമായി ബന്ധപ്പെട്ട ആട്രിബ്യൂട്ടുകൾ, അതായത് സ്ഥാനം, നിറം, ടെക്സ്ചർ കോർഡിനേറ്റുകൾ എന്നിവ സംഭരിക്കുന്നു.
• ഇൻഡെക്സ് ബഫറുകൾ: ത്രികോണങ്ങളോ മറ്റ് പ്രിമിറ്റീവുകളോ വരയ്ക്കുന്നതിന് വെർട്ടെക്സുകൾ ഏത് ക്രമത്തിൽ ഉപയോഗിക്കണമെന്ന് വ്യക്തമാക്കുന്ന ഇൻഡെക്സുകൾ സംഭരിക്കുന്നു.

ഈ ബഫറുകൾ എങ്ങനെ അനുവദിക്കുകയും റദ്ദാക്കുകയും ചെയ്യുന്നു എന്നത് വെബ്ജിഎൽ ആപ്ലിക്കേഷൻ്റെ മൊത്തത്തിലുള്ള ആരോഗ്യത്തെയും പ്രകടനത്തെയും നേരിട്ട് ബാധിക്കുന്നു.

പ്രശ്നം: മെമ്മറി പൂൾ ഫ്രാഗ്മെൻ്റേഷൻ

മെമ്മറി പൂളിലെ ഫ്രീ മെമ്മറി ചെറുതും തുടർച്ചയല്ലാത്തതുമായ ഭാഗങ്ങളായി വിഭജിക്കപ്പെടുമ്പോഴാണ് മെമ്മറി പൂൾ ഫ്രാഗ്മെൻ്റേഷൻ സംഭവിക്കുന്നത്. വ്യത്യസ്ത വലുപ്പത്തിലുള്ള ഒബ്ജക്റ്റുകൾ കാലക്രമേണ അനുവദിക്കുകയും റദ്ദാക്കുകയും ചെയ്യുമ്പോൾ ഇത് സംഭവിക്കുന്നു. ഒരു ജിഗ്‌സോ പസിൽ സങ്കൽപ്പിക്കുക, അതിൽ നിന്ന് നിങ്ങൾ ക്രമരഹിതമായി കഷണങ്ങൾ നീക്കം ചെയ്യുന്നു – മൊത്തത്തിൽ ആവശ്യത്തിന് ഇടമുണ്ടെങ്കിൽ പോലും പുതിയതും വലുതുമായ കഷണങ്ങൾ ചേർക്കുന്നത് ബുദ്ധിമുട്ടായിത്തീരുന്നു.

വെബ്ജിഎല്ലിൽ, ഫ്രാഗ്മെൻ്റേഷൻ നിരവധി പ്രശ്നങ്ങളിലേക്ക് നയിച്ചേക്കാം:

• അലോക്കേഷൻ പരാജയങ്ങൾ: മൊത്തത്തിൽ ആവശ്യത്തിന് മെമ്മറി ഉണ്ടെങ്കിലും, മതിയായ വലുപ്പമുള്ള തുടർച്ചയായ ഒരു ബ്ലോക്ക് ലഭ്യമല്ലാത്തതിനാൽ ഒരു വലിയ ബഫർ അലോക്കേഷൻ പരാജയപ്പെട്ടേക്കാം.
• പ്രകടനത്തിലെ കുറവ്: അനുയോജ്യമായ ഒരു ബ്ലോക്ക് കണ്ടെത്താൻ വെബ്ജിഎൽ ഇംപ്ലിമെൻ്റേഷന് മെമ്മറി പൂളിലൂടെ തിരയേണ്ടി വന്നേക്കാം, ഇത് അലോക്കേഷൻ സമയം വർദ്ധിപ്പിക്കുന്നു.
• കോൺടെക്സ്റ്റ് നഷ്ടപ്പെടൽ: ഗുരുതരമായ സാഹചര്യങ്ങളിൽ, കടുത്ത ഫ്രാഗ്മെൻ്റേഷൻ വെബ്ജിഎൽ കോൺടെക്സ്റ്റ് നഷ്ടപ്പെടാൻ കാരണമാകും, ഇത് ആപ്ലിക്കേഷൻ ക്രാഷാകാനോ ഫ്രീസ് ആകാനോ ഇടയാക്കും. കോൺടെക്സ്റ്റ് നഷ്ടപ്പെടുന്നത് ഒരു വലിയ പ്രശ്നമാണ്, അവിടെ വെബ്ജിഎൽ സ്റ്റേറ്റ് നഷ്ടപ്പെടുകയും പൂർണ്ണമായി പുനരാരംഭിക്കേണ്ടി വരികയും ചെയ്യുന്നു.

തുടർച്ചയായി ഒബ്ജക്റ്റുകൾ ഉണ്ടാക്കുകയും നശിപ്പിക്കുകയും ചെയ്യുന്ന ഡൈനാമിക് സീനുകളുള്ള സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകളിൽ ഈ പ്രശ്നങ്ങൾ രൂക്ഷമാകുന്നു. ഉദാഹരണത്തിന്, കളിക്കാർ നിരന്തരം രംഗത്തേക്ക് പ്രവേശിക്കുകയും പുറത്തുപോകുകയും ചെയ്യുന്ന ഒരു ഗെയിം, അല്ലെങ്കിൽ അതിൻ്റെ ജ്യാമിതി പതിവായി അപ്‌ഡേറ്റ് ചെയ്യുന്ന ഒരു ഇൻ്ററാക്ടീവ് ഡാറ്റാ വിഷ്വലൈസേഷൻ പരിഗണിക്കുക.

ഉപമ: തിരക്കേറിയ ഹോട്ടൽ

വെബ്ജിഎൽ മെമ്മറി പൂളിനെ പ്രതിനിധീകരിക്കുന്ന ഒരു ഹോട്ടലിനെക്കുറിച്ച് ചിന്തിക്കുക. അതിഥികൾ ചെക്ക്-ഇൻ ചെയ്യുകയും ചെക്ക്-ഔട്ട് ചെയ്യുകയും ചെയ്യുന്നു (മെമ്മറി അനുവദിക്കുകയും റദ്ദാക്കുകയും ചെയ്യുന്നു). ഹോട്ടൽ റൂം അസൈൻമെൻ്റുകൾ മോശമായി കൈകാര്യം ചെയ്യുകയാണെങ്കിൽ, പല ചെറിയ, ഒഴിഞ്ഞ മുറികൾ പലയിടത്തായി ചിതറിക്കിടക്കും. മൊത്തത്തിൽ മതിയായ ഒഴിഞ്ഞ മുറികളുണ്ടെങ്കിലും, ഒരു വലിയ കുടുംബത്തിന് (ഒരു വലിയ ബഫർ അലോക്കേഷൻ) ഒരുമിച്ച് താമസിക്കാൻ അടുത്തടുത്തുള്ള മതിയായ മുറികൾ കണ്ടെത്താൻ കഴിഞ്ഞേക്കില്ല. ഇതാണ് ഫ്രാഗ്മെൻ്റേഷൻ.

ബഫർ അലോക്കേഷൻ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള തന്ത്രങ്ങൾ

ഭാഗ്യവശാൽ, വെബ്ജിഎൽ ആപ്ലിക്കേഷനുകളിൽ മെമ്മറി പൂൾ ഫ്രാഗ്മെൻ്റേഷൻ കുറയ്ക്കാനും ബഫർ അലോക്കേഷൻ ഒപ്റ്റിമൈസ് ചെയ്യാനും നിരവധി സാങ്കേതിക വിദ്യകളുണ്ട്. നിലവിലുള്ള ബഫറുകൾ പുനരുപയോഗിക്കുക, കാര്യക്ഷമമായി മെമ്മറി അനുവദിക്കുക, ഗാർബേജ് കളക്ഷൻ്റെ സ്വാധീനം മനസ്സിലാക്കുക എന്നിവയിലാണ് ഈ തന്ത്രങ്ങൾ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നത്.

1. ബഫർ പുനരുപയോഗം

ഫ്രാഗ്മെൻ്റേഷനെ ചെറുക്കുന്നതിനുള്ള ഏറ്റവും ഫലപ്രദമായ മാർഗ്ഗം സാധ്യമാകുമ്പോഴെല്ലാം നിലവിലുള്ള ബഫറുകൾ പുനരുപയോഗിക്കുക എന്നതാണ്. നിരന്തരം ബഫറുകൾ ഉണ്ടാക്കുകയും നശിപ്പിക്കുകയും ചെയ്യുന്നതിനു പകരം, അവയുടെ ഉള്ളടക്കം പുതിയ ഡാറ്റ ഉപയോഗിച്ച് അപ്ഡേറ്റ് ചെയ്യാൻ ശ്രമിക്കുക. ഇത് അലോക്കേഷനുകളുടെയും ഡീഅലോക്കേഷനുകളുടെയും എണ്ണം കുറയ്ക്കുകയും ഫ്രാഗ്മെൻ്റേഷൻ സാധ്യത കുറയ്ക്കുകയും ചെയ്യുന്നു.

ഉദാഹരണം: ഡൈനാമിക് ജ്യാമിതി അപ്‌ഡേറ്റുകൾ

ഒരു ഒബ്ജക്റ്റിൻ്റെ ജ്യാമിതി ചെറുതായി മാറുമ്പോഴെല്ലാം ഒരു പുതിയ ബഫർ ഉണ്ടാക്കുന്നതിനുപകരം, നിലവിലുള്ള ബഫറിൻ്റെ ഡാറ്റ `gl.bufferSubData` ഉപയോഗിച്ച് അപ്ഡേറ്റ് ചെയ്യുക. ഈ ഫംഗ്ഷൻ മുഴുവൻ ബഫറും വീണ്ടും അനുവദിക്കാതെ തന്നെ ബഫറിൻ്റെ ഉള്ളടക്കത്തിൻ്റെ ഒരു ഭാഗം മാറ്റിസ്ഥാപിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ആനിമേറ്റഡ് മോഡലുകൾക്കോ പാർട്ടിക്കിൾ സിസ്റ്റങ്ങൾക്കോ ഇത് വളരെ ഫലപ്രദമാണ്.

            
// Assume 'vertexBuffer' is an existing WebGL buffer
const newData = new Float32Array(updatedVertexData);

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, newData);

            

              
                Copy
              
            
          

പുതിയ ബഫർ ഉണ്ടാക്കി പഴയത് ഡിലീറ്റ് ചെയ്യുന്നതിനേക്കാൾ വളരെ കാര്യക്ഷമമാണ് ഈ രീതി.

അന്താരാഷ്ട്ര പ്രസക്തി: ഈ തന്ത്രം വിവിധ സംസ്കാരങ്ങളിലും ഭൂമിശാസ്ത്രപരമായ പ്രദേശങ്ങളിലും സാർവത്രികമായി പ്രായോഗികമാണ്. കാര്യക്ഷമമായ മെമ്മറി മാനേജ്മെൻ്റിൻ്റെ തത്വങ്ങൾ ആപ്ലിക്കേഷൻ്റെ ലക്ഷ്യമിടുന്ന പ്രേക്ഷകരോ സ്ഥലമോ പരിഗണിക്കാതെ ഒന്നുതന്നെയാണ്.

2. മുൻകൂട്ടി അനുവദിക്കൽ (പ്രീ-അലോക്കേഷൻ)

ആപ്ലിക്കേഷൻ്റെയോ സീനിൻ്റെയോ തുടക്കത്തിൽ തന്നെ ബഫറുകൾ മുൻകൂട്ടി അനുവദിക്കുക. ഇത് റൺടൈമിൽ, പ്രകടനം കൂടുതൽ നിർണായകമാകുമ്പോൾ, അലോക്കേഷനുകളുടെ എണ്ണം കുറയ്ക്കുന്നു. ബഫറുകൾ മുൻകൂട്ടി അനുവദിക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് പെട്ടെന്നുള്ള അലോക്കേഷൻ സ്പൈക്കുകൾ ഒഴിവാക്കാം, അത് സ്റ്റട്ടറിംഗിനോ ഫ്രെയിം ഡ്രോപ്പുകൾക്കോ കാരണമാകും.

ഉദാഹരണം: നിശ്ചിത എണ്ണം ഒബ്ജക്റ്റുകൾക്കായി ബഫറുകൾ മുൻകൂട്ടി അനുവദിക്കൽ

നിങ്ങളുടെ സീനിൽ പരമാവധി 100 ഒബ്ജക്റ്റുകൾ ഉണ്ടാകുമെന്ന് നിങ്ങൾക്കറിയാമെങ്കിൽ, എല്ലാ 100 ഒബ്ജക്റ്റുകളുടെയും ജ്യാമിതി സംഭരിക്കാൻ ആവശ്യമായ ബഫറുകൾ മുൻകൂട്ടി അനുവദിക്കുക. ചില ഒബ്ജക്റ്റുകൾ തുടക്കത്തിൽ ദൃശ്യമല്ലെങ്കിൽ പോലും, ബഫറുകൾ തയ്യാറാക്കി വെക്കുന്നത് പിന്നീട് അവ അനുവദിക്കേണ്ടതിൻ്റെ ആവശ്യം ഇല്ലാതാക്കുന്നു.

            
const maxObjects = 100;
const vertexBuffers = [];

for (let i = 0; i < maxObjects; i++) {
 const buffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(someInitialVertexData), gl.DYNAMIC_DRAW); // DYNAMIC_DRAW is important here!
 vertexBuffers.push(buffer);
}

            

              
                Copy
              
            
          

`gl.DYNAMIC_DRAW` എന്ന ഉപയോഗ സൂചന ഇവിടെ നിർണായകമാണ്. ബഫറിൻ്റെ ഉള്ളടക്കം ഇടയ്ക്കിടെ മാറ്റം വരുത്തുമെന്ന് ഇത് വെബ്ജിഎല്ലിനോട് പറയുന്നു, ഇത് ഇംപ്ലിമെൻ്റേഷനെ മെമ്മറി മാനേജ്മെൻ്റ് അതിനനുസരിച്ച് ഒപ്റ്റിമൈസ് ചെയ്യാൻ അനുവദിക്കുന്നു.

3. ബഫർ പൂളിംഗ്

ഒരു കസ്റ്റം ബഫർ പൂൾ നടപ്പിലാക്കുക. ഇതിൽ വ്യത്യസ്ത വലുപ്പത്തിലുള്ള, മുൻകൂട്ടി അനുവദിച്ച ബഫറുകളുടെ ഒരു പൂൾ ഉണ്ടാക്കുന്നത് ഉൾപ്പെടുന്നു. നിങ്ങൾക്ക് ഒരു ബഫർ ആവശ്യമുള്ളപ്പോൾ, നിങ്ങൾ പൂളിൽ നിന്ന് ഒന്ന് അഭ്യർത്ഥിക്കുന്നു. ബഫറുമായുള്ള നിങ്ങളുടെ ഉപയോഗം കഴിയുമ്പോൾ, അത് ഡിലീറ്റ് ചെയ്യുന്നതിനുപകരം പൂളിലേക്ക് തിരികെ നൽകുന്നു. സമാന വലുപ്പത്തിലുള്ള ബഫറുകൾ പുനരുപയോഗിക്കുന്നതിലൂടെ ഇത് ഫ്രാഗ്മെൻ്റേഷൻ തടയുന്നു.

ഉദാഹരണം: ലളിതമായ ബഫർ പൂൾ നടപ്പിലാക്കൽ

            
class BufferPool {
 constructor() {
 this.freeBuffers = {}; // Store free buffers, keyed by size
 }

 acquireBuffer(size) {
 if (this.freeBuffers[size] && this.freeBuffers[size].length > 0) {
 return this.freeBuffers[size].pop();
 } else {
 const buffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(size), gl.DYNAMIC_DRAW);
 return buffer;
 }
 }

 releaseBuffer(buffer, size) {
 if (!this.freeBuffers[size]) {
 this.freeBuffers[size] = [];
 }
 this.freeBuffers[size].push(buffer);
 }
}

const bufferPool = new BufferPool();

// Usage:
const buffer = bufferPool.acquireBuffer(1024); // Request a buffer of size 1024
// ... use the buffer ...
bufferPool.releaseBuffer(buffer, 1024); // Return the buffer to the pool

            

              
                Copy
              
            
          

ഇതൊരു ലളിതമായ ഉദാഹരണമാണ്. കൂടുതൽ മികച്ച ഒരു ബഫർ പൂളിൽ വ്യത്യസ്ത തരം ബഫറുകൾ (വെർട്ടെക്സ് ബഫറുകൾ, ഇൻഡെക്സ് ബഫറുകൾ) കൈകാര്യം ചെയ്യുന്നതിനുള്ള തന്ത്രങ്ങളും, പൂളിൽ അനുയോജ്യമായ ബഫർ ലഭ്യമല്ലാത്ത സാഹചര്യങ്ങൾ (ഉദാഹരണത്തിന്, ഒരു പുതിയ ബഫർ ഉണ്ടാക്കുകയോ നിലവിലുള്ള ഒന്നിൻ്റെ വലുപ്പം മാറ്റുകയോ ചെയ്യുക) കൈകാര്യം ചെയ്യുന്നതിനുള്ള വഴികളും ഉൾപ്പെട്ടേക്കാം.

4. പതിവായ അലോക്കേഷനുകൾ കുറയ്ക്കുക

ടൈറ്റ് ലൂപ്പുകളിലോ റെൻഡർ ലൂപ്പിനുള്ളിലോ ബഫറുകൾ അനുവദിക്കുകയും ഡീഅലോക്കേറ്റ് ചെയ്യുകയും ചെയ്യുന്നത് ഒഴിവാക്കുക. ഈ പതിവായ അലോക്കേഷനുകൾ പെട്ടെന്ന് ഫ്രാഗ്മെൻ്റേഷനിലേക്ക് നയിച്ചേക്കാം. അലോക്കേഷനുകൾ ആപ്ലിക്കേഷൻ്റെ അത്ര പ്രാധാന്യമില്ലാത്ത ഭാഗങ്ങളിലേക്ക് മാറ്റുക അല്ലെങ്കിൽ മുകളിൽ വിവരിച്ചതുപോലെ ബഫറുകൾ മുൻകൂട്ടി അനുവദിക്കുക.

ഉദാഹരണം: കണക്കുകൂട്ടലുകൾ റെൻഡർ ലൂപ്പിന് പുറത്തേക്ക് മാറ്റുക

ഒരു ബഫറിൻ്റെ വലുപ്പം നിർണ്ണയിക്കാൻ നിങ്ങൾക്ക് കണക്കുകൂട്ടലുകൾ നടത്തണമെങ്കിൽ, അത് റെൻഡർ ലൂപ്പിന് പുറത്ത് ചെയ്യുക. റെൻഡർ ലൂപ്പ് കഴിയുന്നത്ര കാര്യക്ഷമമായി സീൻ റെൻഡർ ചെയ്യുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കണം, മെമ്മറി അനുവദിക്കുന്നതിലല്ല.

            
// Bad (inside the render loop):
function render() {
 const bufferSize = calculateBufferSize(); // Expensive calculation
 const buffer = gl.createBuffer();
 // ...
}

// Good (outside the render loop):
let bufferSize;
let buffer;

function initialize() {
 bufferSize = calculateBufferSize();
 buffer = gl.createBuffer();
}

function render() {
 // Use the pre-allocated buffer
 // ...
}

            

              
                Copy
              
            
          

5. ബാച്ചിംഗും ഇൻസ്റ്റൻസിംഗും

ഒന്നിലധികം ഒബ്ജക്റ്റുകളുടെ ജ്യാമിതി ഒരൊറ്റ ബഫറിലേക്ക് ലയിപ്പിച്ച് ഒന്നിലധികം ഡ്രോ കോളുകളെ ഒരൊറ്റ ഡ്രോ കോളാക്കി മാറ്റുന്നതാണ് ബാച്ചിംഗ്. ഒരൊറ്റ ഡ്രോ കോളും ഒരൊറ്റ ബഫറും ഉപയോഗിച്ച് ഒരേ ഒബ്ജക്റ്റിൻ്റെ ഒന്നിലധികം ഇൻസ്റ്റൻസുകൾ വ്യത്യസ്ത രൂപാന്തരങ്ങളോടെ റെൻഡർ ചെയ്യാൻ ഇൻസ്റ്റൻസിംഗ് നിങ്ങളെ അനുവദിക്കുന്നു.

രണ്ട് സാങ്കേതിക വിദ്യകളും ഡ്രോ കോളുകളുടെ എണ്ണം കുറയ്ക്കുന്നു, എന്നാൽ അവ ആവശ്യമായ ബഫറുകളുടെ എണ്ണവും കുറയ്ക്കുന്നു, ഇത് ഫ്രാഗ്മെൻ്റേഷൻ കുറയ്ക്കാൻ സഹായിക്കും.

ഉദാഹരണം: ഇൻസ്റ്റൻസിംഗ് ഉപയോഗിച്ച് സമാനമായ ഒന്നിലധികം ഒബ്ജക്റ്റുകൾ റെൻഡർ ചെയ്യൽഓരോ സമാന ഒബ്ജക്റ്റിനും പ്രത്യേക ബഫർ ഉണ്ടാക്കുന്നതിനുപകരം, ഒബ്ജക്റ്റിൻ്റെ ജ്യാമിതി അടങ്ങുന്ന ഒരൊറ്റ ബഫർ ഉണ്ടാക്കുകയും വ്യത്യസ്ത സ്ഥാനങ്ങൾ, റൊട്ടേഷനുകൾ, സ്കെയിലുകൾ എന്നിവ ഉപയോഗിച്ച് ഒബ്ജക്റ്റിൻ്റെ ഒന്നിലധികം പകർപ്പുകൾ റെൻഡർ ചെയ്യാൻ ഇൻസ്റ്റൻസിംഗ് ഉപയോഗിക്കുകയും ചെയ്യുക.

            
// Vertex buffer for the object's geometry
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// ...

// Instance buffer for the object's transformations
gl.bindBuffer(gl.ARRAY_BUFFER, instanceBuffer);
// ...

// Enable instancing attributes
gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttribute);
gl.vertexAttribDivisor(positionAttribute, 0); // Not instanced

gl.vertexAttribPointer(offsetAttribute, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(offsetAttribute);
gl.vertexAttribDivisor(offsetAttribute, 1); // Instanced

gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, instanceCount);

            

              
                Copy
              
            
          

6. ഉപയോഗ സൂചന (Usage Hint) മനസ്സിലാക്കുക

ഒരു ബഫർ ഉണ്ടാക്കുമ്പോൾ, നിങ്ങൾ വെബ്ജിഎല്ലിന് ഒരു ഉപയോഗ സൂചന നൽകുന്നു, അത് ബഫർ എങ്ങനെ ഉപയോഗിക്കുമെന്ന് സൂചിപ്പിക്കുന്നു. ഈ ഉപയോഗ സൂചന വെബ്ജിഎൽ ഇംപ്ലിമെൻ്റേഷനെ മെമ്മറി മാനേജ്മെൻ്റ് ഒപ്റ്റിമൈസ് ചെയ്യാൻ സഹായിക്കുന്നു. ഏറ്റവും സാധാരണമായ ഉപയോഗ സൂചനകൾ ഇവയാണ്:

• `gl.STATIC_DRAW`:** ബഫറിൻ്റെ ഉള്ളടക്കം ഒരിക്കൽ വ്യക്തമാക്കുകയും പലതവണ ഉപയോഗിക്കുകയും ചെയ്യും.
• `gl.DYNAMIC_DRAW`:** ബഫറിൻ്റെ ഉള്ളടക്കം ആവർത്തിച്ച് മാറ്റം വരുത്തും.
• `gl.STREAM_DRAW`:** ബഫറിൻ്റെ ഉള്ളടക്കം ഒരിക്കൽ വ്യക്തമാക്കുകയും കുറച്ച് തവണ ഉപയോഗിക്കുകയും ചെയ്യും.

            
// Bad:
function updateBuffer(data) {
 const newData = new Float32Array(data);
 gl.bufferSubData(gl.ARRAY_BUFFER, 0, newData);
}

// Good:
const newData = new Float32Array(someMaxSize); // Create the array once

function updateBuffer(data) {
 newData.set(data); // Fill the array with new data
 gl.bufferSubData(gl.ARRAY_BUFFER, 0, newData);
}

            

              
                Copy
              
            
          

            
let bufferCount = 0;
let totalBufferSize = 0;

const originalCreateBuffer = gl.createBuffer;
gl.createBuffer = function() {
 const buffer = originalCreateBuffer.apply(this, arguments);
 bufferCount++;
 // You could try to estimate the buffer size here based on usage
 console.log("Buffer created. Total buffers: " + bufferCount);
 return buffer;
};

const originalDeleteBuffer = gl.deleteBuffer;
gl.deleteBuffer = function(buffer) {
 originalDeleteBuffer.apply(this, arguments);
 bufferCount--;
 console.log("Buffer deleted. Total buffers: " + bufferCount);
};

            

              
                Copy
              
            
          

            
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

canvas.addEventListener("webglcontextlost", function(event) {
 event.preventDefault();
 console.log("WebGL context lost.");
 // Cancel any ongoing rendering
 // ...
}, false);

canvas.addEventListener("webglcontextrestored", function(event) {
 console.log("WebGL context restored.");
 // Re-initialize WebGL and recreate resources
 initializeWebGL();
 loadResources();
 startRendering();
}, false);

            

              
                Copy